<template>
  <UserTable
    v-bind="$attrs"
    :column-selected="['index', 'userName', 'nickName', 'email', 'phoneNumber', 'createTime', 'action']"
    :data-source="sourceData"
    :loading="spinning"
    :row-selection="{
      selectedRowKeys,
      getCheckboxProps: ({ admin }) => ({ disabled: admin }),
      onChange: setSelectedRowKeys
    }"
    :pagination="{
      size: 'small',
      simple: true,
      current: pagination.pageNum,
      pageSize: pagination.pageSize,
      total: pagination.total,
      onChange: onPageChange
    }"
    @search="onSearchData"
    @search-reset="onResetData"
  >
    <template #operateLeft>
      <AButton type="primary" ghost :icon="createVNode(PlusOutlined)" @click="() => setOpenAddAuthUserModal(true)">
        分配用户
      </AButton>
      <APopconfirm
        title="您确定批量取消用户授权吗?"
        ok-text="是"
        cancel-text="否"
        @confirm="() => onAuthCancel(selectedRowKeys)"
      >
        <AButton danger ghost :icon="createVNode(DeleteOutlined)" :disabled="!selectedRowKeys.length">取消</AButton>
      </APopconfirm>
    </template>

    <template #operateRight>
      <ATooltip title="刷新列表">
        <AButton :icon="createVNode(ReloadOutlined)" :disabled="!!timer" @click="onRefreshData">
          {{ timer || '' }}
        </AButton>
      </ATooltip>
    </template>

    <template #bodyActionCell="{ record }">
      <APopconfirm
        title="您确定取消该用户授权吗?"
        ok-text="是"
        cancel-text="否"
        @confirm="() => onAuthCancel([record.userId])"
      >
        <AButton type="link" danger size="small">取消</AButton>
      </APopconfirm>
    </template>
  </UserTable>
  <SelectUserPanel
    :open="openAddAuthModal"
    :api="(v) => fetchGetAllocatedUserList(props.roleId, false, v)"
    @finish="onAddAuthUser"
    @cancel="() => setOpenAddAuthUserModal(false)"
  >
  </SelectUserPanel>
</template>

<script setup>
import { createVNode, onMounted, watch } from 'vue';
import { UserTable, SelectUserPanel } from '@/views/system/user/modules';
import { PlusOutlined, ReloadOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { useState, useFetchPageData } from '@/hooks';
import { fetchGetAllocatedUserList, fetchAddAllocatedUser, fetchCancelAllocatedUser } from '@/api/system/roleAuth';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  open: { type: Boolean, default: false },
  roleId: { type: [Number, String], default: () => null }
});

const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [openAddAuthModal, setOpenAddAuthUserModal] = useState(false);
const {
  sourceData,
  pagination,
  spinning: spinning,
  timer,
  onFetchData,
  onSearchData,
  onPageChange,
  onResetData,
  onRefreshData
} = useFetchPageData((v) => fetchGetAllocatedUserList(props.roleId, true, v));

onMounted(() => {
  onFetchData();
});

watch(
  () => props.open,
  (open) => open && onFetchData()
);

/**
 * 分配用户
 *
 * @param values
 * @returns {Promise<void>}
 */
const onAddAuthUser = async (values) => {
  await fetchAddAllocatedUser({ roleId: props?.roleId, userIds: values });
  setOpenAddAuthUserModal(false);
  await onRefreshData(true);
};

/**
 * 取消分配
 *
 * @param values
 */
const onAuthCancel = async (values) => {
  await fetchCancelAllocatedUser({ roleId: props?.roleId, userIds: values });
  await onRefreshData(true);
};
</script>

<style lang="scss" scoped></style>
